<template>
	
	<el-containe>

		<el-header style="text-align: center; font-size: 18px">
			<i class="el-icon-s-check" style="margin-right: 15px"></i>
			<span>患者病例</span>
		</el-header>
		<el-main>
			<el-row :data="ruleForm" type="flex" class="row-bg" justify="space-around">

				<el-col :span="2">
					<div class="grid-content bg-purple">患者姓名</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple">
						<el-input prop="name" v-model="ruleForm.name" placeholder="姓名" clearable></el-input>
					</div>
				</el-col>

				<el-col :span="2">
					<div class="grid-content bg-purple-light">年龄</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple-light">
						<el-input prop="age" v-model="ruleForm.age" placeholder="请输入年龄" clearable></el-input>
					</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple">性别</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple">
						<el-input prop="age" v-model="ruleForm.age" placeholder="请输入性别" clearable></el-input>
					</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple">病历号</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple">
						<el-input prop="uid" v-model="ruleForm.uid" placeholder="请输入病历号" clearable></el-input>
					</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple">医生编号</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple">
						<el-input prop="docid" v-model="ruleForm.docid" placeholder="请输入医生编号" clearable></el-input>
					</div>
				</el-col>
			</el-row>

			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="患者主诉" prop="chief">
					<el-input type="textarea" v-model="ruleForm.chief"></el-input>
				</el-form-item>
				<el-form-item label="现病史" prop="ness">
					<el-input type="textarea" v-model="ruleForm.ness"></el-input>
				</el-form-item>
				<el-form-item label="既往史" prop="past">
					<el-input type="textarea" v-model="ruleForm.past"></el-input>
				</el-form-item>
				<el-form-item label="过敏史" prop="allergic">
					<el-input type="textarea" v-model="ruleForm.allergic"></el-input>
				</el-form-item>

				<el-form-item label="医生初步诊断结果及建议" prop="desc">
					<el-input type="textarea" v-model="ruleForm.desc"></el-input>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
					<el-button @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>

		</el-main>

		<el-footer>Footer</el-footer>

	</el-containe>

</template>

<script>
	import {
		showMsgTitle
	} from '@/utils/api2'
	import {
		showMsgConfirm
	} from '@/utils/api2'
	import {
		getRequest
	} from '@/utils/api2'

	export default {
		data() {
			return {
				// ruleForm:{},
				ruleForm: {
					chief: '',
					ness: '',
					past: '',
					allergic: '',
					desc: '',
					name: '',
					age: '',
					docid: '',
					sex: '',
					uid: ''
				},


				rules: {
					name: [{
							required: true,
							message: '请输入患者主诉',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],

					name1: [{
						required: true,
						message: '请输入现病史',
						trigger: 'blur'
					}],
					name2: [{
						required: true,
						message: '请输入既往史',
						trigger: 'blur'
					}],
					name3: [{
						required: true,
						message: '请输入过敏史',
						trigger: 'blur'
					}],
					name4: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],


					desc: [{
						required: true,
						message: '请填写医生建议',
						trigger: 'blur'
					}]
				}
			};
		},
		mounted: function() {
			let url = "/case";
			let _this = this;
			getRequest(url).then(resp => {
				if (resp.status == 200) {
					
					//alert(resp.data);
					// _this.ruleForm = resp.data;
					_this.ruleForm.age=resp.data[0].age;
					_this.ruleForm.name=resp.data[0].name;
					_this.ruleForm.sex=resp.data[0].sex;
					_this.ruleForm.chief=resp.data[0].chief;
					_this.ruleForm.past=resp.data[0].past;
					_this.ruleForm.ness=resp.data[0].ness;
					_this.ruleForm.desc=resp.data[0].desc;
					_this.ruleForm.allergic=resp.data[0].allergic;
					_this.ruleForm.uid=resp.data[0].uid;
					_this.ruleForm.docid=resp.data[0].docid;
					console.log('打印：',_this.ruleForm);
					
					
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败1!'
					});
				}
			}, resp => {
				_this.loading = false;
				if (resp.response.status == 403) {
					_this.$message({
						type: 'error',
						message: resp.response.data
					});
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败2!'
					});
				}
			}).catch(resp => {
				//压根没见到服务器
				_this.loading = false;
				_this.$message({
					type: 'error',
					message: '数据加载失败3!'
				});
			});


		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style>
	.el-header {
		background-color: #47cfd1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-footer {
		background-color: #47cfd1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}
</style>
